<template>
    <div class="center-table-container">
        <el-table :data="tableData" class="custom-table" :header-cell-style="headerCellStyle" :row-style="rowStyle"
            :cell-style="cellStyle" stripe>
            <el-table-column prop="index" label="序号" width="80" align="center">
                <template #default="{ $index }">
                    {{ $index + 1 }}
                </template>
            </el-table-column>

            <el-table-column prop="siteName" label="站点名称" width="120" align="center">
                <template #default="{ row }">
                    <span>{{ row.siteName }}</span>
                </template>
            </el-table-column>

            <el-table-column prop="dispatchCount" label="派车数量" align="center" >
                <template #default="{ row }">
                    <span>{{ row.dispatchCount }}辆</span>
                </template>
            </el-table-column>

            <el-table-column prop="availableVehicles" label="可用车辆" align="center" >
                <template #default="{ row }">
                    <span>{{ row.availableVehicles }}辆</span>
                </template>
            </el-table-column>

            <el-table-column prop="abnormalVehicles" label="异常车辆" align="center" >
                <template #default="{ row }">
                    <span>{{ row.abnormalVehicles }}辆</span>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

interface TableDataItem {
    siteName: string
    dispatchCount: number
    availableVehicles: number
    abnormalVehicles: number
}

const tableData = ref<TableDataItem[]>([
    // {
    //     siteName: '庆云一中',
    //     dispatchCount: 15,
    //     availableVehicles: 2,
    //     abnormalVehicles: 8
    // },
    // {
    //     siteName: '人民医院',
    //     dispatchCount: 22,
    //     availableVehicles: 1,
    //     abnormalVehicles: 12
    // },
    // {
    //     siteName: '庆云大街',
    //     dispatchCount: 8,
    //     availableVehicles: 5,
    //     abnormalVehicles: 3
    // },
    // {
    //     siteName: '文化路',
    //     dispatchCount: 18,
    //     availableVehicles: 0,
    //     abnormalVehicles: 15
    // },
    // {
    //     siteName: '庆云火车站',
    //     dispatchCount: 0,
    //     availableVehicles: 3,
    //     abnormalVehicles: 0
    // },
    // {
    //     siteName: '金山公园',
    //     dispatchCount: 25,
    //     availableVehicles: 1,
    //     abnormalVehicles: 20
    // }
])

// el-table 样式配置
const headerCellStyle = {
    color: '#fff',
    fontWeight: '600',
    fontSize: '14px',
    textAlign: 'center',
    border: 'none'
}

const rowStyle = ({ rowIndex }: { rowIndex: number }) => {
    return {
        background: rowIndex % 2 === 0 ? 'rgba(0, 212, 255, 0.05)' : 'transparent'
    }
}

const cellStyle = {
    color: '#8c9eff',
    fontSize: '13px',
    textAlign: 'center',
    border: 'none',
    borderBottom: '1px solid rgba(255, 255, 255, 0.1)'
}


const init = (module: any) => {
  let data = JSON.parse(module)
  if (module) {
    tableData.value = data
  }
}

defineExpose({
  init
})
</script>

<style scoped lang="less">
.center-table-container {
    width: 100%;
    height: 100%;
    padding: 15px;
    box-sizing: border-box;

    .custom-table {
        width: 100%;
        height: 100%;
        border-radius: 8px;
        overflow: hidden;
        border: 1px solid rgba(0, 212, 255, 0.3);
        background: transparent;

        // 表头样式
        :deep(.el-table__header-wrapper) {
            .el-table__header {
                background: linear-gradient(90deg, #1e3a8a 0%, #3b82f6 100%);
            }

            th.el-table__cell {
                background: transparent !important;
                border: none;
                padding: 15px 0;
            }
        }

        // 表体样式
        :deep(.el-table__body-wrapper) {
            background: transparent;
            max-height: calc(100% - 50px);
            overflow-y: auto;

            &::-webkit-scrollbar {
                width: 6px;
            }

            &::-webkit-scrollbar-track {
                background: rgba(255, 255, 255, 0.1);
            }

            &::-webkit-scrollbar-thumb {
                background: #00d4ff;
                border-radius: 3px;
            }
        }

        // 行样式
        :deep(.el-table__row) {
            background: transparent;
            transition: all 0.3s ease;

            &:hover {
                background: rgba(0, 212, 255, 0.1) !important;
            }

            td.el-table__cell {
                background: transparent;
                padding: 12px 0;
            }
        }

        // 数据样式
        :deep(.el-table__body) {
            tr:nth-child(1) td {
                color: #00d4ff;
                font-weight: 600;
            }

            tr:nth-child(2) td {
                color: #00ff88;
                font-weight: 600;
            }

            tr:nth-child(3) td {
                color: #ff4757;
                font-weight: 600;
            }
        }
    }
}

:deep(.el-table tr) {
    background-color: transparent !important;
}
</style>